<template>
<div>
<div class="demo-image__placeholder" style="width: 1366px; height: 600px; margin-top: 18px;background-image: url(http://127.0.0.1:8080/ipfs/QmcjuMDQEuxuKeLsjR34o4hHwCaG7K6KADuWeQprjgo1kx);backdrop-filter: blur(5px); position: relative; padding:1px;
    box-sizing:border-box;z-index:1;background-size: 1366px 600px;">
  <div class="block">
    <el-image 
    style="width: 618px; height: 399px;margin-top: 30px; margin-left: 85px;float: left; box-shadow: 0 5px 12px 2 rgba(0, 0, 0, 0.1);z-index:11;"
    :src="src1" lazy></el-image>
    <p style="font-size: 6ch;font-weight: bold;color: #383838; padding-top: 50px;">创建,发现,出售<br>独一无二的NFT</p>
    <p style="color: #524A4E;">利用区块链技术实现数字资产的认证与交易</p>
  </div>
  <div style="margin-top: 50px;">
    <el-button type="primary" style="font-weight: bold; font-size: larger;" @click="$router.push('/certify')">去认证</el-button>
    <el-button style="margin-left: 30px; font-weight: bold;font-size: larger; border-color: #409EFF;" @click="$router.push('/explore')">探索更多</el-button>
  </div>

</div>
<!-- <div class="more" style="width: 1366px; height: 500px;">
</div> -->
<div class="demo-image__placeholder1" style="width: 1366px; height: 600px; margin-top: 5px;background-image: url(http://127.0.0.1:8080/ipfs/QmdG2TNDMf48NkFFLbXB6Qxy2WqUxaq8kWBVmoYqcdTPV1);backdrop-filter: blur(5px); position: relative; padding:1px;
    box-sizing:border-box;z-index:1;background-size: 1366px 600px;box-shadow: 2 5px 12px rgba(0, 0, 0, 0.1);">
  <div class="block1">
    <el-image 
    style="width: 618px; height: 399px;margin-top: 30px; margin-right: 85px;float: right; box-shadow: 0 5px 12px 2 rgba(0, 0, 0, 0.1);z-index:11;"
    :src="src2" lazy></el-image>
    <p style="font-size: 6ch;font-weight: bold;color: #383838; padding-top: 50px;">依托以太坊平台<br>实现去中心化机制</p>
    <p style="color: #524A4E;">以太坊被称为“全球计算机”，是一个支持智能合约<br>及各类去中心化应用的基础性</p>
  </div>
  <div style="margin-top: 50px;">
    <el-button type="primary" style="font-weight: bold; font-size: larger; width: 160px;  background-color: #a02f2b; border-color: #a02f2b;" @click="$router.push('/copyrightTrade')">去看看</el-button>
  </div>
</div>

<div class="demo-image__placeholder2" style="width: 1366px; height: 600px; margin-top: 5px;background-image: url(http://127.0.0.1:8080/ipfs/QmW1vKYytDkCtCV4oGeTtyQPgTadmfa28cQ6WKuda1wPzx);backdrop-filter: blur(5px); position: relative; padding:1px;
    box-sizing:border-box;z-index:1;background-size: 1366px 600px;box-shadow: 2 5px 12px rgba(0, 0, 0, 0.1);">
  <div class="block2">
    <el-image 
    style="width: 618px; height: 399px;margin-top: 30px; margin-left: 85px;float: left; box-shadow: 0 5px 12px 2 rgba(0, 0, 0, 0.1);z-index:11;"
    :src="src3" lazy></el-image>
    <p style="font-size: 6ch;font-weight: bold;color: #383838; padding-top: 50px;">依托以太坊平台<br>实现去中心化机制</p>
    <p style="color: #524A4E;">以太坊被称为“全球计算机”，是一个支持智能合约<br>及各类去中心化应用的基础性</p>
  </div>
  <div style="margin-top: 50px;">
    <el-button type="primary" style="font-weight: bold; font-size: larger; width: 260px;  background-color: #94b9d4; border-color: #94b9d4;" @click="$router.push('/copyrightTrade')">上传我的第一个作品</el-button>
  </div>
  <el-link type="primary" @click="$router.push('/helpDoc')"
      style="font-weight: bold; font-size: larger;float: left; margin-left: 230px; margin-top: 50px; ">
     遇到问题？点击进入帮助中心
      </el-link>
</div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        src1: 'http://127.0.0.1:8080/ipfs/QmQJoZB9bs5F8rBe6SftjB18yQnuegT9xMK2qBzh1DLY53',
        src2: 'http://127.0.0.1:8080/ipfs/QmZBpWVwcjjPaHH8otyJ8mhCPqBp9XUWbdTfBZTfih7niH',
        src3: 'http://127.0.0.1:8080/ipfs/QmVxEDebPXD3axMoNXvtBM53MZR94j33oMSbEi5wrVAz4M'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style >

.el-image{
    border-radius: 12px;
    box-shadow: 5px 2px 12px 5px rgba(0, 0, 0, 0.1);
}

</style>